"use client"

import { useState } from "react"
import { CalendarHeader } from "./calendar-header"
import { CalendarGrid } from "./calendar-grid"
import { EventDetails } from "./event-details"
import { CalendarEvent, SAMPLE_EVENTS, getCalendarDays } from "@/lib/calendar"

export function Calendar() {
  const [currentDate, setCurrentDate] = useState<Date>(new Date())
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date())
  const [events, setEvents] = useState<CalendarEvent[]>(SAMPLE_EVENTS)
  
  const days = getCalendarDays(currentDate)

  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 h-full">
      <div className="lg:col-span-2 space-y-4">
        <CalendarHeader 
          currentDate={currentDate} 
          onDateChange={setCurrentDate} 
        />
        <CalendarGrid 
          days={days} 
          currentMonth={currentDate} 
          selectedDate={selectedDate} 
          events={events} 
          onSelectDate={setSelectedDate} 
        />
      </div>
      <div className="h-full">
        <EventDetails 
          selectedDate={selectedDate} 
          events={events} 
        />
      </div>
    </div>
  )
}